<template>
  <div class="live">
    <Card class="video-card" :padding="0">
      <div id="dplayer"></div>
    </Card>

  </div>
</template>
<script>
import flv from 'flv.js'
window.flvjs = flv
import DPlayer from 'dplayer'
import 'dplayer/dist/DPlayer.min.css'
export default {
  name: 'live',
  data() {
    return {
      dplayer: null
    }
  },
  created() {
    if (!this.$route.params.id) {
      this.$router.replace('/home')
    }
  },
  mounted() {
    this.playInit()
  },
  methods: {
    playInit() {
      if (!this.dplayer) {
        this.dplayer = new DPlayer({
          container: document.getElementById('dplayer'),
          hotkey: false,
          live: true,
          autoplay: true,
          video: {
            url: `/live.flv?port=1985&app=myapp&stream=${this.$route.params.id}`,
            type: 'flv'
          }
        });
      }
    }
  }
}
</script>
<style lang="stylus">
  .live
    width 100vw
    height 100vh
    background linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB)
    background-size 400% 400%
    animation Gradient 15s ease infinite
    padding-top 30px

    .video-card
      width 70%
      margin 0 auto
      border none
      overflow hidden

  @keyframes Gradient
    0%
      background-position 0% 50%

    50%
      background-position 100% 50%

    100%
      background-position 0% 50%
</style>


